<template>
  <div>
    <el-button type="primary" class="el-icon-plus" @click="dialogVisible = true"
      >选择</el-button
    >

    <el-single-select
      :dataObj="tableData"
      :prop="prop"
      :total="total"
      title="选择"
      @close="close"
      @confirm="confirm"
      :pageSizes="pageSizes"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      @listenTochildEvent="handleNodeClick"
      @addInput="addInput"
      :dialogVisible.sync="dialogVisible"
    >
      <template slot="dialogTop">
        <div class="search-wp">
          <!-- 搜索 -->
          <el-search
            :formProp="filter"
            @search="search"
            :isShow="isShow"
            @resetForm="resetForm"
          >
            <!-- 单行搜索 -->
            <template slot="search">
              <el-input
                v-model="filter.invoiceNumber"
                clearable
                searchLabel="入库单编号"
                placeholder="输入入库单编号"
              ></el-input>
              <el-input
                v-model="filter.contractNumber"
                clearable
                searchLabel="入库单名称"
                placeholder="输入入库单名称"
              ></el-input>
              <el-input
                v-model="filter.reportInOrgName"
                clearable
                searchLabel="供应商"
                placeholder="输入供应商"
              ></el-input>
              <el-input
                v-model="filter.reportInOrgName"
                clearable
                searchLabel="填报单位"
                placeholder="输入填报单位"
              ></el-input>
              <el-input
                v-model="filter.categoryName"
                clearable
                searchLabel="仓库"
                placeholder="输入仓库"
              ></el-input>
              <el-input
                v-model="filter.categoryName"
                clearable
                searchLabel="运输产品分类名称"
                placeholder="输入运输产品分类名称"
              ></el-input>
            </template>
            <!-- 展开后多个搜索 -->
            <el-input
              v-model="filter.invoiceNumber"
              clearable
              slot="searchItem1"
              searchLabel="合同名称"
              placeholder="输入合同名称模糊查询"
            ></el-input>
            <el-input
              v-model="filter.contractNumber"
              searchLabel="合同编号"
              clearable
              slot="searchItem2"
              placeholder="输入订单编号模糊查询"
            ></el-input>
            <el-input
              v-model="filter.reportInOrgName"
              clearable
              slot="searchItem3"
              searchLabel="填报单位"
              placeholder="输入订单编号模糊查询"
            ></el-input>
            <el-input
              v-model="filter.categoryName"
              clearable
              slot="searchItem4"
              searchLabel="分类名称"
              placeholder="输入订单编号模糊查询"
            ></el-input>
          </el-search>
        </div>
      </template>
    </el-single-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filter: {}, // 搜索集合
      isShow: false, // 搜索展开控制
      tableData: [],
      prop: [
        { prop: "contractCode", label: "入库单编号", width: "150" },
        { prop: "contractName", label: "入库单名称", width: "150" },
        { prop: "reportInOrgName", label: "填报单位", width: "150" },
        { prop: "partyBName", label: "供应商", width: "150" },
        { prop: "thirdCategoriesOfName", label: "物资类别", width: "150" },
        { prop: "enabledDate", label: "仓库", width: "150" }
      ],
      dataObj: [],
      pageSizes: [2, 5],
      input4: "",
      iconShow1: true,
      total: 4,

      count: 1,
      dialogVisible: false,
      isShowCol: false
    };
  },
  watch: {
    dialogVisible: {
      handler(n) {
        if (n) {
          this.getList();
        }
      }
    }
  },

  methods: {
    getList() {},
    // 重置搜索
    resetForm() {},
    // 搜索
    search(val) {
      console.log(val);
    },
    // 弹框确定按钮
    confirm(val) {
      console.log(val);
      this.$emit("contractId", val.contractCode);
    },
    close(val) {
      console.log("取消");
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    showMessageFromChild(data) {
      console.log(data);
    },
    addInput(data) {
      let adds = this.tableData.filter(o => {
        return (
          o.mc === data.inputMc ||
          o.jc === data.inputJc ||
          o.sj === data.inputSj
        );
      });
      this.dataObj = adds;
      console.log("Input数据", this.dataObj);
    },
    handleNodeClick(data) {
      this.input4 = data.mc;
      if (this.input4 === "" || this.input4 === undefined) {
        this.iconShow1 = true;
        console.log("1");
      } else {
        console.log("2");
        this.iconShow1 = false;
      }
      console.log("this.input4", this.input4);
    },
    currentValue(dynamic1) {
      console.log(dynamic1);
    }
  }
};
</script>
<style lang="scss" scoped>
.types-wp {
  display: flex;
  .label {
    line-height: 29px;
  }
}
/deep/.el-dialog__title {
  position: absolute;
  top: 20px;
  width: 85px !important;
}
/deep/#ccui-paging {
  display: none;
}
.search-wp {
  width: 100%;
}
/deep/.el-form-item.is-error .el-input__inner,
.el-form-item.is-error .el-input__inner:focus,
.el-form-item.is-error .el-textarea,
.el-form-item.is-error .el-textarea:focus {
  // color: #ccc;
}
</style>
